<template>
  <div class="same_wrap">
    <h1>{{ title }}</h1>
    <div class="sname_swiper">
      <swiper :options="swiperOption">
        <swiper-slide
          class="same_slide"
          v-for="(item, index) in doubleArr"
          :key="index"
        >
          <div class="slide_one" v-for="pitem in item" :key="pitem.id">
            <img :src="pitem.picture" alt="" />
            <p>{{ pitem.name }}</p>
            <div>{{ pitem.price }}</div>
          </div>
        </swiper-slide>
        <!-- 圆点 -->
        <div class="swiper-pagination" slot="pagination"></div>
        <!-- 前 -->
        <div class="swiper-button-prev" slot="button-prev"></div>
        <!-- 后 -->
        <div class="swiper-button-next" slot="button-next"></div>
      </swiper>
    </div>
  </div>
</template>
<script>
import { _getSameProduct } from '../../../api/detail'
export default {
  props: ['title'],
  data () {
    return {
      sameArr: [],
      swiperOption: {
        loop: true,
        speed: 1000, //切换速度
        observer: true, //修改swiper自己或子元素时，自动初始化swiper
        observeParents: true, //修改swiper的父元素时，自动初始化swiper
        // 自动轮播
        autoplay: {
          delay: 2000
        },
        effect: 'fade',
        // 左右切换
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        },
        // 分页器
        pagination: {
          el: '.swiper-pagination',
          clickable: true // 允许点击小圆点跳转
        }
      }
    }
  },
  created () {
    this.getSame()
  },
  computed: {
    doubleArr () {
      return [
        this.sameArr.slice(0, 4),
        this.sameArr.slice(4, 8),
        this.sameArr.slice(8, 12),
        this.sameArr.slice(12, 16)
      ]
    }
  },
  methods: {
    // 获取相似商品接口
    async getSame () {
      var res = await _getSameProduct({
        id: this.$route.query.id, //商品id
        limit: 16 //同类商品数量
      })
      console.log(res)
      this.sameArr = res.data.result
    }
  }
}
</script>
<style lang="less">
.same_wrap {
  width: 1240px;
  height: 460px;
  margin: 20px auto;
  h1 {
    height: 80px;
  }
  .sname_swiper {
    height: 380px;
    .slide_one {
      width: 240px;
      height: 289px;
      text-align: center;
      background: white;
      img {
        width: 230px;
        height: 230px;
      }
      div {
        color: red;
      }
    }
  }
}
.same_slide {
  display: flex;
  justify-content: space-around;
}
</style>
